<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- transition属性是css3中最具有颠覆性的特性之一，务必重视起来 -->
    <style>
        /* 
            transition: 要过渡的属性  花费时间  运动曲线  何时开始
                1.属性：想要变化的css属性，宽高、背景颜色、内外边距等都可以。如果想要所有的属性都变化过渡，写一个all就可以
                2.花费时间：单位是秒(注意必须写单位),比如0.5s
                3.运动曲线(可以省略)：默认是ease
                4.何时开始(可以省略)：单位是秒(注意必须写单位)可以设置延迟触发时间，默认是0s也就是无延迟

            实际开发中，transition一般都会搭配hover使用
        */

        div{
            width: 200px;
            height: 200px;
            background-color: red;

            /* 
                注意千万不要把transition写到:hover的css里去了，那样的话只有在鼠标悬浮的时候才会有过渡属性，会导致鼠标不悬浮的时候样式直接就很生硬的变回去了
            */
            transition: all 0.5s ease;
        }
        div:hover{
            width: 400px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>